<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>薪资想过万，代码敲三遍</title>
	<!-- 第2步，引入js和css文件 -->
	<link rel="stylesheet" href="./bootstrap/bootstrap.min.css">
	<link rel="stylesheet" href="./bootstrap/bootstrap-icons.css">

	<script src="./bootstrap/bootstrap.min.js"></script>

	<style>
		#myToast {
			width: 200px;
			height: 50px;
			background-color: pink;
			line-height: 50px;
			position: fixed;
			left: 50%;
			transform: translateX(-50%);
			text-align: center;
		}
	</style>
</head>

<body>
	<!-- 第1步，给提示框盒子，添加class类 -->
	<div id="myToast" class="toast">我是提示</div>

	<script>
		// 第3步，获取提示框盒子，创建请提示的对象，调用其方法
		const toastBox = document.querySelector('#myToast')

		// const toast = new bootstrap.Toast(提示框盒子元素对象, 配置对象)
		const toast = new bootstrap.Toast(toastBox, {
			animation: true, // 是否启用过渡动画
			autohide: true, // 是否自动隐藏提示框
			delay: 2000, // 3000ms后自动隐藏提示框
		})


		toast.show()
	</script>
</body>

</html>